<!--
 * @Author: 郭招娣 10615594+guo-zhaodi@user.noreply.gitee.com
 * @Date: 2022-08-17 11:16:48
 * @LastEditors: 郭招娣 10615594+guo-zhaodi@user.noreply.gitee.com
 * @LastEditTime: 2022-08-27 09:30:50
 * @FilePath: \后端管理系统\app\src\views\Users\component\UserSearch.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="box">
    <el-row :gutter="20">
      <el-col :span="8">
        <el-input
          clearable
          placeholder="请输入内容"
          @click="clearSearch"
          v-model="userObj.query"
        >
          <el-button
            type="primary"
            slot="append"
            icon="el-icon-search"
            @click="search"
          ></el-button>
        </el-input>
      </el-col>
      <el-col :span="4">
        <el-button type="primary" @click="addUser">添加用户</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  props: {
    userObj: {
      type: Object,
      default: () => {
        return {
          query: "",
          pagenum: 1,
          pagesize: 2,
        };
      },
    },
  },
  data() {
    return {};
  },
  methods: {
    addUser() {
      this.$emit('add-user')
    },
    search() {
      this.$emit("init-search");
    },
    // 清空搜索
    clearSearch() {
      this.$emit("init-search");
    },
  },
};
</script>

<style>
.box {
  margin-top: 20px;
}
</style>